<template>
  <div class="course_detail">
    <y-header :active="'kczx'" />
    <div class="detail_content">
      <div class="detail_body">
        <ul class="detail_header clearfix">
          <li>
            <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
            <span>></span>
          </li>
          <li>
            <nuxt-link :to="{name: 'list'}">实验中心</nuxt-link>
          </li>
        </ul>
        <div class="clearfix">
          <div class="video_box">
            <div
              id="player"
              ref="videobox"
              v-video-player:myVideoPlayer="playerOptions"
              class="confVideo vjs-custom-skin video-player detail_view"
              :playsinline="true"
              customEventName="customstatechangedeventname"
            />
          </div>
          <div class="view_info">
            <span style="font-size: 24px; line-height: 1.5" :title="experimentInfo.wangzhi">
              {{ experimentInfo.mingcheng }}
              <span class="cbox-tip">{{ experimentInfo.kechengjibie }}</span>
            </span>
            <div class="desc-tab" style="line-height: 26px;margin-bottom: 15px">
              <div class="desc-tab-container">
                <span data-position="2" class="desc-tab-item" style="font-size: 16px; color:#fff">{{ teacherInfo.lecturerName }}</span>
                <span data-position="3" class="desc-tab-item" style="font-size: 16px; color:#fff">{{ teacherInfo.lecturerSchool }}</span>
                <span data-position="5" class="desc-tab-item" style="font-size: 16px; color:#fff">上线时间：2023年</span>
              </div>
            </div>
            <span style="font-size: 14px; line-height: 26px;margin-bottom: 20px">
              所属专业类：{{ experimentInfo.zhuanye }} &nbsp;&nbsp;
              对应专业：{{ experimentInfo.zhuanye }} &nbsp;&nbsp;
              课程类型：{{ experimentInfo.kechengleixing }} &nbsp;&nbsp;
              实验类型：{{ experimentInfo.shiyanleixing }} &nbsp;&nbsp;<br>
              所属课程：{{ experimentInfo.shiyanleixing }} &nbsp;&nbsp;
            </span>
            <span style="font-size: 14px; line-height: 22px;">{{ experimentInfo.jianjie }}</span>
            <div class="foot_box">
              <button class="buy_btn" @click="doExperiment">我要做实验</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class=" detail_info detail_box clearfix">
      <div class="layout_left">
        <ul class="course_tab clearfix">
          <li :class="{on: tab == 'info'}"><a href="javascript:" @click="tab = 'info'">课程介绍</a></li>
          <li :class="{on: tab == 'big'}"><a href="javascript:" @click="tab = 'big'">课程目录</a></li>
        </ul>
        <div v-if="tab == 'info'" class="content_info">
          <div class="desc-tab">
            <div class="desc-tab-container">
              <span class="desc-tab-item" :class="{'on': subTab == 'info1'}" data-position="2" @click="subTab = 'info1'">
                实验教学目标
              </span>
              <span class="desc-tab-item" :class="{'on': subTab == 'info2'}" data-position="3" @click="subTab = 'info2'">
                实验原理
              </span>
              <span class="desc-tab-item" :class="{'on': subTab == 'info3'}" data-position="5" @click="subTab = 'info3'">
                实验教学过程与实验方法
              </span>
              <span class="desc-tab-item" :class="{'on': subTab == 'info4'}" data-position="4" @click="subTab = 'info4'">
                实验步骤
              </span>
              <span class="desc-tab-item" :class="{'on': subTab == 'info5'}" data-position="6" @click="subTab = 'info5'">
                实验结果与结论
              </span>
            </div>
          </div>
          <div v-if="subTab == 'info1'" class="introduce" v-html="experimentInfo.mubiao" />
          <div v-if="subTab == 'info2'" class="introduce" v-html="experimentInfo.yuanli" />
          <div v-if="subTab == 'info3'" class="introduce" v-html="experimentInfo.guocheng" />
          <div v-if="subTab == 'info4'" class="introduce" v-html="experimentInfo.buzhou" />
          <div v-if="subTab == 'info5'" class="introduce" v-html="experimentInfo.jieguo" />
        </div>
        <div v-if="tab == 'big'" class="content_info">
          <div class="desc-tab">
            <div class="desc-tab-container">
              <span class="desc-tab-item" :class="{'on': subTab == 'big1'}" data-position="2" @click="subTab = 'big1'">
                网络要求
              </span>
              <span class="desc-tab-item" :class="{'on': subTab == 'big2'}" data-position="3" @click="subTab = 'big2'">
                硬件要求
              </span>
              <span class="desc-tab-item" :class="{'on': subTab == 'gib3'}" data-position="5" @click="subTab = 'gib3'">
                用户操作系统要求
              </span>
            </div>
          </div>
          <div v-if="subTab == 'big1'" class="introduce" v-html="experimentInfo.wangluo" />
          <div v-if="subTab == 'big2'" class="introduce" v-html="experimentInfo.yingjian" />
          <div v-if="subTab == 'gib3'" class="introduce" v-html="experimentInfo.caozuoxitong" />
        </div>
      </div>
      <div class="layout_right">
        <div class="teacher_info clearfix">
          <span class="head">实验系统浏览器要求</span>
          <div class="teacher_msg">
            <div v-if="experimentInfo.liulanqi && experimentInfo.liulanqi.length > 0" style="margin:12px;display: inline-block;">
              <div v-for="item in experimentInfo.liulanqi.split(',')" :key="item" class="browser-item" :class="item" />
            </div>
          </div>
        </div>

        <div class="teacher_info clearfix">
          <span class="head">教学支持热线</span>
          <div class="teacher_msg">
            <div v-if="experimentInfo.liulanqi && experimentInfo.liulanqi.length > 0" style="margin:12px;display: inline-block;">
              {{ experimentInfo.rexian }}
            </div>
          </div>
        </div>

        <div class="teacher_info clearfix">
          <span class="head">团队成员</span>
          <div class="teacher_msg">
            <div v-if="teacherInfo" class="teacher_msg_right">
              <img v-if="teacherInfo.lecturerHead" class="teacher_phone" :src="teacherInfo.lecturerHead" alt="">
              <img v-else class="teacher_phone" src="~/assets/image/friend.jpg" alt="">
              <div class="teacher_name">{{ teacherInfo.lecturerName }}</div>
              <div class="teacher_position">{{ teacherInfo.lecturerPosition }}</div>
              <div class="info_box" v-html="teacherInfo.introduce" />
            </div>
            <div class="desc-tab" style="margin: 12px">
              <div class="desc-tab-container" style="margin-top: 15px; margin-bottom: 15px;">
                <span data-position="2" class="desc-tab-item" :class="{on2: zuozheTab == 'zuozhes1'}" @click="zuozheTab = 'zuozhes1'">主要成员</span>
                <span data-position="3" class="desc-tab-item" :class="{on2: zuozheTab == 'zuozhes2'}" @click="zuozheTab = 'zuozhes2'">其它成员</span>
              </div>
              <div v-if="zuozheTab == 'zuozhes1'" class="introduce" v-html="formatZuozhe(experimentInfo.zuozhes1)" />
              <div v-if="zuozheTab == 'zuozhes2'" class="introduce" v-html="formatZuozhe(experimentInfo.zuozhes2)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <bottom /> -->
  </div>
</template>
<script>
import { playerOptions } from '@/pages/course/PlayerOptionss'
import YHeader from '@/components/common/Header.vue'
import cookies from '@/utils/cookies'
import { experimentDetail, userExperiment, userExperimentDetail } from '~/api/course.js'
import '@/assets/css/brower.css'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader
  },
  async asyncData(context) {
    console.log('context.params is ', context.params)
    const result = {}
    result.teacherInfo = {}
    result.experimentInfo = {}
    result.token = ''
    try {
      result.token = cookies.getInServerToken(context.req)
      // console.log('token is ', result.token)
      if (result.token) { // 登录
        result.experimentInfo = await userExperimentDetail({ id: context.params.id }, result.token)
        // console.log('result.experimentInfo', result.experimentInfo)
      }
      if (!result.token || (result.experimentInfo && result.experimentInfo.code === 301)) { // 没登录或者登录过期
        result.experimentInfo = await experimentDetail({ id: context.params.id })
        // console.log('result.experimentInfo2', result.experimentInfo)
      }
      // console.log('result.experimentInfo is', result.experimentInfo)
      if (result.experimentInfo.lecturerResp) {
        result.teacherInfo = result.experimentInfo.lecturerResp
      }
    } catch (e) {
      console.error(e)
      context.error({ message: 'Data not found', statusCode: 404 })
    }

    return result
  },
  data() {
    return {
      playerOptions: {},
      tab: 'info',
      subTab: 'info1',
      zuozheTab: 'zuozhes1',
      playPeriod: '' // 当前播放课时
    }
  },
  head() {
    return {
      title: this.experimentInfo.mingcheng + '-' + this.$store.state.websiteInfo.websiteName
    }
  },
  watch: {
    tab(newVal, oldVal) {
      // 切换一级 tab， 二级 subTab 设置第一个页签为默认
      this.subTab = newVal + '1'
    }
  },
  mounted() {
    this.action(this.experimentInfo.logo, this.experimentInfo.jianjieShipin, false)
  },
  methods: {
    formatZuozhe(str) {
      try {
        if (!str || str === '') {
          return ''
        }

        const arrays = JSON.parse(str)
        const rets = []
        for (let i = 0; i < arrays.length; i++) {
          rets.push('<p style="padding-top: 6px; padding-bottom: 6px;"><span>' + arrays[i].name + '</span><span style="float: right; margin-right: 20px">' + arrays[i].school + '</span></p>')
        }
        return rets.join('')
      } catch (e) {
        console.log(e)
      }
      return ''
    },
    goLogin() {
      this.$store.dispatch('REDIRECT_LOGIN')
    },
    // 加载视频
    action(logo, resourceUrl, autoplay) {
      // 设置播放器背景
      // this.$refs.watchVideo.playerOptions.poster = this.courseInfo.courseLogo
      this.playerOptions = {}
      playerOptions.sources[0] = {
        type: 'video/mp4', // 资源格式写法：'video/mp4'
        src: resourceUrl // 本地资源地址，注意：本地资源存放在public文件夹中，本文视频资源路径public/video/1.mp4
      }
      playerOptions.poster = logo
      playerOptions.autoplay = autoplay

      this.playerOptions = playerOptions
    },
    // 做实验
    doExperiment(event) {
      const wangzhi = this.experimentInfo.wangzhi
      let isLogin = false
      if (wangzhi && wangzhi.indexOf('ticket') > 0) {
        isLogin = true
      }
      if (!isLogin) {
        this.$msgBox({
          content: '请登录后再做实验',
          isShowCancelBtn: false
        }).then(() => {
          this.$store.dispatch('REDIRECT_LOGIN')
        })
        return
      } else {
        // const msg = '<p style="word-break: break-all;">您将要离开本站前往其他网站，确认请点击下面的链接。</p> <p style="margin: 10px auto 20px;"> <a style="color: #0096ff; word-wrap: break-word; word-break: break-all; display: block; text-decoration: none;" target="_blank" href=' + this.experimentInfo.wangzhi + '>' + this.experimentInfo.wangzhi + '</a></p>'
        const msg = '<p style="word-break: break-all;">您将要离开本站前往其他网站，确认请点击下面的链接。</p> <p style="margin: 10px auto 20px;"> <span style="color: #0096ff; word-wrap: break-word; word-break: break-all; display: block; text-decoration: none;">' + this.experimentInfo.wangzhi + '</span></p>'
        this.$msgBox({
          title: '跳转提示',
          content: msg,
          isHtmlContent: true,
          confirmBtnText: '做实验'
        }).then(() => {
          const experimentId = this.experimentInfo.id
          const url = this.experimentInfo.wangzhi
          this.userExperiment(experimentId, url)
        })
      }
    },
    userExperiment(experimentId, url) {
      console.log('做实验', url)
      const data = {
        id: experimentId
      }
      userExperiment(data).then(res => {
        if (res === 'OK') {
          window.open(url, '_blank')
        }
      })
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.detail_content {
  background: rgb(51, 51, 51);
  background-image: url('../../images/details-header-bg.jpg');
  min-height: 400px;

  .detail_body {
    width: 1200px;
    margin: 0 auto;
    height: 373px;
  }
}

.detail_header {
  li {
    float: left;
    line-height: 57px;
    margin: 0 0;
    margin-left: 10px;
    color: #fff;
    font-size: 14px;

    span {
      margin-left: 10px;
      margin-right: 10px;
    }

    a {
      color: #fff;

      &:hover {
        text-decoration: none;
      }
    }
  }
}

.video_box {
  float: right;
  position: relative;
}

.view_info {
  width: 750px;
  margin-left: 10px;
  height: 340px;
  font-size:14px;
  font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;

  span {
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    word-break: break-all;
    display: block;
  }

  .foot_box {
    position: absolute;
    top: 400px;
    height: 36px;
  }

  .buy_btn {
    display: block;
    width: 136px;
    height: 36px;
    color: #fff;
    background: #4269c9;
    border: none;
    border-radius: 6px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    // position: absolute;
    // bottom: 0px;
    &:hover {
      text-decoration: none;
      color: #fff;
      cursor: pointer;
    }
  }

  .study_num {
    float: right;
    height: 36px;
    line-height: 36px;
    color: #999;
    font-size: 14px;
  }

  .huabei {
    color: #fff;
    font-size: 13px;
    position: absolute;
    bottom: 0;
    padding-left: 25px;

    img {
      width: 17px;
      height: 17px;
      position: absolute;
      left: 0;
    }
  }
  .cbox-tip {
    color: #fff;
    font-size: 12px;
    padding: 3px 6px;
    display: inline-block;
    vertical-align: 4px;
    margin-left: 10px;
    background: #e48238;
    background: -moz-linear-gradient(left, #e48238 0%, #e47230 11%, #d94624 100%);
    background: -webkit-linear-gradient(left, #e48238 0%, #e47230 11%, #d94624 100%);
    background: linear-gradient(to right, #e48238 0%, #e47230 11%, #d94624 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e48238', endColorstr='#d94624', GradientType=1);
    border-radius: 8px 0 8px 0;
    -webkit-border-radius: 8px 0 8px 0;
    -moz-border-radius: 8px 0 8px 0;
  }
}

.detail_view {
  float: left;
  width: 400px;
  height: 220px;
  margin-top: 20px;
  background: rgb(102, 102, 102);
  background-size: 100%;

  &.float_win {
    position: fixed;
    right: 10px;
    bottom: 30px;
    z-index: 9999;
  }
}

.course_detail {
  .detail_info {
    margin: 20px auto 60px;
    width: 1200px;
  }

  .layout_left {
    width: 920px;
    float: left;

    .info_body {
      margin-bottom: 30px;
    }
  }

  .course_tab {
    padding-left: 30px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;

    li {
      float: left;
      height: 66px;
      line-height: 66px;
      margin-right: 80px;

      &.on {
        border-bottom: 2px solid #4269c9;

        a {
          color: #4269c9;
        }
      }

      a {
        color: #000;
        font-size: 14px;
        font-weight: 700;

        &:hover {
          text-decoration: none;
          color: #4269c9;
        }
      }
    }
  }

  .content_info {
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    min-height: 400px;

    .title {
      border-left: 3px solid #000;
      padding-left: 12px;
      font-size: 16px;
      color: #000;
      font-weight: 700;
      margin-bottom: 25px;
    }

    .introduce {
      font-size: 14px;
      line-height: 30px;
      color: #333;
      padding-left: 0;
      word-wrap: break-word;
      word-break: break-all;
      display: block;
    }

    .introduce pre {
      white-space: pre-wrap; /* CSS-3 /
      white-space: -moz-pre-wrap; / Mozilla, since 1999 /
      white-space: -pre-wrap; / Opera 4-6 /
      white-space: -o-pre-wrap; / Opera 7 /
      Word-wrap: break-word; / Internet Explorer 5.5+ */
    }
  }

  .layout_right {
    width: 260px;
    float: right;
  }

  .teacher_info {
    background: #fff;
    border-radius: 8px;
    position: relative;
    margin-bottom: 20px;

    .head {
      display: block;
      line-height: 60px;
      height: 60px;
      padding-left: 20px;
      font-size: 16px;
      color: #333;
      border-bottom: 1px solid rgb(228, 228, 228);
    }

    .teacher_phone {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgb(228, 228, 228);
      text-align: center;
      line-height: 46px;
      font-size: 13px;
      color: #999;
      float: left;
      margin: 0px 10px 0 10px;

      img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
      }
    }

    .teacher_msg_right {
      width: 235px;
      float: right;
      margin: 12px 15px 12px 12px;
      line-height: 20px;
    }

    .teacher_name {
      font-size: 18px;
      font-weight: 700;
      color: #333;
      margin: 5px 0;
    }

    .teacher_position {
      font-size: 12px;
      color: #333;
      margin-bottom: 5px;
    }
  }
}

.desc-tab {
  display: block;
  margin-bottom: 26px;
}

.desc-tab .desc-tab-item {
  display:inline-block;
  font-size: 14px;
  color: #555;
  margin-right: 19px;
  padding: 6px 0;
  cursor: pointer;
  position: relative;
}

.desc-tab .desc-tab-item:after {
  content:"";
  width: 1px;
  height: 14px;
  right: -13px;
  background: #d1d1d1;
  position: absolute;
  top: 9px;
}

.desc-tab .desc-tab-item:last-child:after {
  display: none;
}

.desc-tab .desc-tab-item:hover {
  color: #333;
}

.desc-tab .desc-tab-item.on {
  color: #4269c9;
}

.desc-tab .desc-tab-item.on2 {
  color: #4269c9;
  border-bottom: 1px solid #4269c9;
}
</style>
